<template>
  <div class="login-container">

    <div class="login-box">
      <a-form
        id="components-form-demo-normal-login"
        :form="form"
        class="login-form"
        @submit="handleSubmit"
      >
    <h4>TeamWork Project</h4>
        <a-form-item>
          <a-input
            v-decorator="[
              'userName',
              {
                rules: [
                  { required: true, message: '请输入用户名' },
                ],
              },
            ]"
            placeholder="用户名"
          >
            <a-icon
              slot="prefix"
              type="user"
              style="color: rgba(0, 0, 0, 0.25)"
            />
          </a-input>
        </a-form-item>
        <a-form-item>
          <a-input
            v-decorator="[
              'password',
              {
                rules: [
                  { required: true, message: '请输入密码' },
                ],
              },
            ]"
            type="password"
            placeholder="密码"
          >
            <a-icon
              slot="prefix"
              type="lock"
              style="color: rgba(0, 0, 0, 0.25)"
            />
          </a-input>
        </a-form-item>
        <a-form-item>
          <a-checkbox
            v-decorator="[
              'remember',
              {
                valuePropName: 'checked',
                initialValue: false,
              },
            ]"
          >
            记住密码
          </a-checkbox>
          <a class="login-form-forgot" href=""> 忘记密码 </a>
          <a-button type="primary" html-type="submit" class="login-form-button">
            登录
          </a-button>
        </a-form-item>
      </a-form>
    </div>

    <!-- 版权声明 -->
    <div class="copy-footer">
        ©版权声明: 12331111111111111111111111111111111
    </div>
  </div>
</template>

<script>
export default {
  beforeCreate() {
    this.form = this.$form.createForm(this, { name: "normal_login" });
  },
  name: "Login",
  data() {
    return {
      form: this.$form.createForm(this, { name: "horizontal_login" }),
    };
  },

  components: {},

  computed: {},

  mounted() {},

  methods: {
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          // console.log("Received values of form: ", values);
          this.$router.push('/home');
        }
      });
    },
   
  },
};
</script>
<style scoped lang="less">
.login-container {
  width: 100%;
  height: 100vh;
  // background-color: rgb(211, 213, 238) !important;
  overflow: hidden;
    background: url('../../assets/background.png') no-repeat;
  .login-box {
    width: 600px;
    height: 400px;
    margin: 150px auto;
    border-radius: 20px;
    background-color: #fff;
    .login-form {
      padding: 0 10px;
    }
    h4 {
      text-align: center;
      font-size: 40px;
      font-weight: 700;
      color: #40a9ff;
    }
  }
  .copy-footer {
    margin-top: 320px;
    text-align: center;
    color: #fff;
    font-size: 15px;
  }
}
#components-form-demo-normal-login .login-form {
  max-width: 300px;
}
#components-form-demo-normal-login .login-form-forgot {
  float: right;
}
#components-form-demo-normal-login .login-form-button {
  width: 100%;
}
</style>
